<template>
    <div class="confirm-modal">
      <transition name="fade">
        <!-- @touchmove.prevent -->
        <div class="modal-dialog" @click="clickMaskToClose ? handleCancel() : null" v-if="visible" @touchmove.prevent>
          <div class="modal">
            <div class="modal-title" v-if="title">
              {{ title }}
            </div>
            <div :class="['modal-content', title ? '' : 'no-title-content']">
              {{ content }}
            </div>
            <div class="split-line-top"></div>
            <div class="modal-footer">
              <div class="btn-cancel" @click="handleCancel" v-if="showCancelButton">
                {{ cancelText }}
              </div>
              <div class="split-line-center" v-if="showCancelButton"></div>
              <div class="btn-confirm" :style="{ color: confirmColor }" @click="handleConfirm">
                <div>{{ confirmText }}</div>
              </div>
            </div>
          </div>
        </div>
      </transition>
    </div>
  </template>
  
  <script>
  import { ref, defineComponent, reactive, toRefs } from "vue";
  
  export default defineComponent({
    props: {
     
    },
    emits: {
      onConfirm: null,
      onCancel: null,
    },
    setup(props, context) {
      let tempData = Object.assign({}, props);
      const propsData = reactive(tempData);
      const handleConfirm = () => {
        propsData.visible = false;
        context.emit("onConfirm");
      };
      const handleCancel = () => {
        propsData.visible = false;
        context.emit("onCancel");
      };
  
      return {
        ...toRefs(propsData),
        handleCancel,
        handleConfirm,
      };
    },
  });
  </script>
  <style scoped>

  </style>
 